<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body,
			.mui-content {
				background-color: #FAFAFA;
			}
			input[type=text] {
				margin-top: 10px;
				height: 50px;
				background-color: #fefefe;
			}
			#find-pwd {
				width: 90%;
				padding: 12px;
				margin-top: 30px;
				font-weight: bolder;
				color: #fff;
				background-color: #aaa;
				margin-left: 5%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content">
			<h5 style="margin-top: 30px;font-weight: bolder;margin-left: 5px;">请输入注册时的邮箱</h5>
			<input type="text" class="mui-input-clear" placeholder="邮箱">
			<button type="button" id="find-pwd" class="mui-btn" disabled="disabled">找回密码</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			document.querySelector("input[type=text]").addEventListener('keyup', function() {
				if (validateInput()) {
					document.getElementById("find-pwd").style.backgroundColor = "#cf2d28";
					document.getElementById("find-pwd").disabled = false;
				} else {
					document.getElementById("find-pwd").style.backgroundColor = "#aaa";
					document.getElementById("find-pwd").disabled = true;
				}
			});

			function validateInput() {
				var email = document.querySelector("input[type=text]").value;
				if (email.trim() != "") {
					var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
					if (reg.test(email)) { //邮箱正则验证
						return true;
					}
				}
				return false;
			}
		</script>
	</body>

</html>